<template>
  <van-nav-bar
    title="我的订单"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <van-tabs v-model:active="active" @change="onTab">
    <van-tab
      v-for="item in tarList"
      :title="item.title"
      :name="item.name"
      :key="item.name"
    >
    </van-tab>
  </van-tabs>

  <div class="list-box" v-if="OrderList.length > 0">
    <div class="list">
      <div class="item" v-for="item in OrderList" :key="item.id">
        <div class="header">
          <div class="left">
            订单号：<span>{{ item.code }}</span>
          </div>
          <div class="right">{{ item.status_text }}</div>
        </div>
        <div class="content">
          <van-card
            v-for="son in item.OrderProduct"
            :key="son.id"
            :price="son.total"
            desc="描述信息"
            :title="son.products.name"
            :thumb="son.products.cover_cdn"
          >
            <template #desc>
              <span>商品单价：￥{{ son.price }}</span>
            </template>
            <template #num>
              <span>商品数量：{{ son.pronum }}</span>
            </template>
          </van-card>
        </div>
        <div class="footer">
          <div class="date">{{ item.createtime }}</div>
          <div class="btn">
            <van-button
              type="primary"
              size="mini"
              color="#7232dd"
              :to="{ path: '/user/order/info', query: { orderid: item.id } }"
              >订单详情</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status >= 1 && item.status <= 4"
               @click="toback(item.id)"
              >申请售后</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 0"
              @click="showPopup(item)"
              >确认支付</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="(item.status >= 2 && item.status <= 4) || item.status < 0"
              @click="toLogs(item.id)"
              >查看物流</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 2"
              @click="toget(item.id)"
              >确认收货</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 3"
              @click="toComment(item.id)"
              >立即评价</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 4"
              @click="Cominfo(item.id)"
              >查看评价</van-button
            >
            <van-button type="danger" size="mini" v-if="item.status > 4"
              >删除订单</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-empty description="暂无订单" v-else />
  <van-popup v-model:show="show" position="bottom" :style="{ height: '25%' }">
    <div class="title">此次消费金额</div>
    <div class="price">{{ amount }}元</div>
    <van-button type="success" size="large" @click="payment"
      >微信支付</van-button
    >
  </van-popup>
</template>
<script>
import { showLoadingToast, showToast, showConfirmDialog } from "vant";
export default {
  data() {
    return {
      show: false,
      active: "",
      tarList: [
        {
          title: "全部",
          name: "",
        },
        {
          title: "待支付",
          name: 0,
        },
        {
          title: "待发货",
          name: 1,
        },
        {
          title: "待收货",
          name: 2,
        },
        {
          title: "待评价",
          name: 3,
        },
        {
          title: "已评价",
          name: 4,
        },
        {
          title: "申请退货",
          name: -1,
        },
        {
          title: "已退货",
          name: -2,
        },
        {
          title: "退货被拒",
          name: -3,
        },
      ],
      LoginUser: this.$cookies.get("LoginAuth"),
      OrderList: [],
      amount: 0,
      orderid: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/user/base/index");
    },
    onTab(value) {
      this.active = value;

      this.getOrderData();
    },
    async getOrderData() {
      let data = {
        busid: this.LoginUser.id,
        status: this.active,
      };

      let result = await this.$api.OrderIndex(data);
      console.log(result);
      if (result.code === 1) {
        this.OrderList = result.data;
      } else {
        this.OrderList = [];
      }
    },

    showPopup(e) {
      this.amount = e.amount;
      this.orderid = e.id;
      this.show = true;
    },
    payment() {
      let _this = this;
      let data = {
        busid: this.LoginUser.id,
        orderid: this.orderid,
      };
      showLoadingToast({
        message: "付款中...",
        forbidClick: true,
        onClose: async function () {
          let result = await _this.$api.toPay(data);
          if (result.code == 1) {
            showToast({
              type: "success",
              message: result.msg,
              onClose: function () {
                _this.show = false;
                _this.getOrderData();
              },
            });
          } else
            showToast({
              type: "fail",
              message: result.msg,
            });
        },
      });
    },
    toLogs(e) {
      this.$router.push({
        path: "/user/order/logs",
        query: { orderid: e },
      });
    },
    toback(e){
      let _this = this;
      let data = {
        busid: this.LoginUser.id,
        orderid: e,
      };
      showConfirmDialog({
        title: "退货",
        message: "您已申请售后，请确认退货。",
      }).then( async() => {
        let result = await _this.$api.toBack(data);
        console.log(result)
        if (result.code == 1) {
          showToast({
            type: "success",
            message: result.msg,
            onClose: function () {
              _this.getOrderData();
            },
          });
        }else{
          showToast({
            type: "fail",
            message: result.msg,
          });
        }
      });
    },
    toComment(e) {
      this.$router.push({
        path: "/user/order/rate",
        query: { orderid: e },
      });
    },
    Cominfo(e) {
      this.$router.push({
        path: "/user/order/cominfo",
        query: { orderid: e },
      });
    },
     toget(e) {
      let _this = this;
      let data = {
        busid: this.LoginUser.id,
        orderid: e,
      };
      showConfirmDialog({
        title: "收货",
        message: "如果已经收到快递与物品，请确认收货。",
      }).then( async() => {
        let result = await _this.$api.toGet(data);
        console.log(result)
        if (result.code == 1) {
          showToast({
            type: "success",
            message: result.msg+",感谢您此次消费。",
            onClose: function () {
              _this.getOrderData();
            },
          });
        }else{
          showToast({
            type: "fail",
            message: result.msg,
          });
        }
      });
    },
  },
  created() {
    this.getOrderData();
  },
};
</script>

<style>
.title {
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #000;
}
.price {
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: rgb(208, 148, 45);
}
.list-box {
  background: #ccc;
}

.list-box .header {
  display: flex;
  justify-content: space-between;
  /* padding: 0 10px; */
}

.list .item .left span {
  font-size: 14px;
  font-weight: bold;
}

.item {
  padding: 5px 5px 3px;
  background: #fff;
  margin-bottom: 5px;
}

.item .header .left {
  font-size: 13px;
}

.item .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item .footer .date {
  font-weight: bold;
}
</style>